<template>
	<div>
		<div class="box">
			<!-- <div class="title">合同</div> -->
			<!-- <AForm -->
			<!-- ref="form1" -->
			<!-- v-model="obj" -->
			<!-- :config="radioList" -->
			<!-- :state="state"></AForm> -->
			<div class="contracBox">
				<AForm
					ref="form2"
					v-model="formData"
					:config="formList"
					:state="state">
					<template #ccc="scope">
						<el-button
							v-if="notEmpty(scope.row.contractTemplateId)"
							class="preview"
							type="text"
							@click="preview(scope.row)">
							查看
						</el-button>
					</template>
				</AForm>
				<el-button
					v-if="showHistory"
					class="orderChangeHistory"
					type="primary"
					@click="toOrderChangeHistory">
					查看变更历史记录
				</el-button>
			</div>

			<!--  -->
			<!-- 出租方 -->
			<Lessor
				v-if="includes(1)"
				ref="Lessor"
				v-model="formData"
				v-bind="querys"
				:deptList="deptList"></Lessor>
			<!-- 承租方 -->
			<Leasee
				v-if="includes(2)"
				ref="Leasee"
				v-model="formData"
				v-bind="querys"></Leasee>
			<Car
				@getDecorationList="getDecorationList"
				v-if="includes(8)"
				ref="Car"
				v-model="formData"
				v-bind="querys"></Car>
			<!-- 期限调整 -->
			<Time
				v-if="includes(4)"
				ref="Time"
				v-model="formData"
				v-bind="querys"></Time>
			<!-- 租金调整 -->
			<Rent
				ref="Rent"
				v-if="includes(32)"
				v-model="formData"
				v-bind="querys"></Rent>
			<!-- 维保 -->
			<Maintain
				ref="Maintain"
				v-if="includes(128)"
				v-model="formData"
				v-bind="querys"></Maintain>

			<!-- 替车 -->
			<Replace
				ref="Replace"
				v-if="includes(256)"
				v-model="formData"
				v-bind="querys"></Replace>
			<!-- 保险 -->
			<Insurance
				ref="Insurance"
				v-if="includes(64)"
				v-model="formData"
				v-bind="querys"></Insurance>
			<!-- 加装 -->
			<Decoration
				ref="Decoration"
				v-if="includes(512)"
				v-model="formData"
				v-bind="querys"></Decoration>
			<!-- 其他 -->
			<Other
				ref="Other"
				v-if="includes(1024)"
				v-model="formData"
				v-bind="querys"></Other>
			<common-contract-content
				ref="commonContractContent"></common-contract-content>

			<!-- <!~~ 承租方变更申请 ~~> -->
			<!-- <LeaseeApply v-model="formData" v-bind="querys"></LeaseeApply> -->
			<!-- <!~~ 法务部审批 ~~> -->
			<!-- <Law v-model="formData" v-bind="querys"></Law> -->
			<!-- <!~~ 车辆变更申请 ~~> -->
			<!-- <Car v-model="formData" v-bind="querys"></Car> -->
		</div>
	</div>
</template>

<script>
	import AForm from '@/components/A/A-form/form/index.vue';
	import Leasee from '@/views/order/minOrder/chunk/adjust/leasee/index.vue';
	import Lessor from '@/views/order/minOrder/chunk/adjust/lessor/index.vue';
	import Time from '@/views/order/minOrder/chunk/adjust/time/index.vue';
	import Rent from '@/views/order/minOrder/chunk/adjust/rent/index.vue';
	import Car from '@/views/order/minOrder/chunk/adjust/car/index.vue';
	import Maintain from '@/views/order/minOrder/chunk/adjust/maintain/index.vue';
	// import LeaseeApply from '@/views/order/minOrder/chunk/apply/leasee/index.vue';
	// import Law from '@/views/order/minOrder/chunk/apply/law/index.vue';
	// import Car from '@/views/order/minOrder/chunk/apply/car/index.vue';
	import Replace from '@/views/order/minOrder/chunk/adjust/replace/index.vue';
	import Insurance from '@/views/order/minOrder/chunk/adjust/insurance/index.vue';
	import Decoration from '@/views/order/minOrder/chunk/adjust/decoration/index.vue';
	import Other from '@/views/order/minOrder/chunk/adjust/other/index.vue';
	import CommonContractContent from '@/views/contractTemplate/components/CommonContractContent.vue';

	import * as app from '@/api/app.js';
	import * as apis from '@/api/order/minOrder/contractChange/api.js';
	export default {
		name: '',
		components: {
			AForm,
			Leasee,
			Lessor,
			Time,
			Rent,
			Maintain,
			Car,
			Replace,
			Insurance,
			Decoration,
			Other,
			// LeaseeApply,
			// Law,
			CommonContractContent,
		},
		dicts: ['order_car_change_type'],
		props: {
			showHistory: {
				required: false,
				default: true,
			},
			value: {
				type: Object,
				default: () => {
					return {};
				},
			},
			state: {
				required: false,
			},
		},
		data() {
			return {
				obj: {
					radio: '1',
				},
				dictList: {
					order_car_change_type: [],
					contractTemplateId: [],
					levelList: [],
					supplierList: [],
					packagelList: [],
					refittedList: [],
					company: [],
					changeType: [],
				},
			};
		},
		provide() {
			return {
				dictList_provide: () => this.dictList,
			};
		},
		computed: {
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			radioList() {
				return [
					{
						label: '合同模板方案',
						type: 'radioGroup',
						prop: 'radio',
						dict: {
							list: [
								{
									label: '补充协议模板',
									value: '1',
								},
							],
						},
						layout: {
							inline: true,
							block: true,
							fit: true,
						},
						rules: true,
					},
				];
			},
			formList() {
				return [
					// {
					// 	label: '补充协议模板',
					// 	prop: 'contractTemplateId',
					// 	type: 'select',
					// 	dict: {
					// 		list: this.dictList.contractTemplateId,
					// 		label: 'templateName',
					// 		value: 'id',
					// 	},
					// 	layout: {
					// 		inline: true,
					// 		block: true,
					// 	},
					// 	slot: 'ccc',
					// 	rules: true,
					// 	on: {
					// 		change({ val, item, row }) {
					// 			row.contractTemplateCode =
					// 				item.value.templateCode;
					// 			row.contractTemplateName =
					// 				item.value.templateName;
					// 		},
					// 	},
					// },
					{
						label: '变更类型',
						prop: 'changeType',
						type: 'radioGroup',
						dict: {
							list: this.dictList.changeType,
						},
						layout: {
							inline: true,
							block: true,
							fit: true,
						},
						rules: true,
						on: {
							change: ({ val, item, row }) => {
								// this.setDisabledChangeType();
								if (val != 2) {
									this.formData.returnMargin = '2';
									this.formData.subsequentData.returnMargin =
										'2';
								}
							},
						},
						// prototype: {
						// 	formItem: {
						// 		// key: this.formData.changeType?.join(','),
						// 	},
						// },
					},
				];
			},
			querys() {
				return {
					state: this.state,
				};
			},
		},
		created() {
			this.dictList.changeType = [
				// {
				// 	label: '出租方',
				// 	value: '1',
				// },
				{
					label: '承租方',
					value: '2',
					disabled: false,
				},
				{
					label: '租赁期限',
					value: '4',
					disabled: false,
				},
				{
					label: '车辆',
					value: '8',
					disabled: false,
				},
				// {
				// 	label: '租金调整',
				// 	value: '16',
				// },
				{
					label: '租金',
					value: '32',
					disabled: false,
				},
				// {
				// 	label: '保险',
				// 	value: '64',
				// },
				// {
				// 	label: '维保',
				// 	value: '128',
				// },
				// {
				// 	label: '替车',
				// 	value: '256',
				// },
				// {
				// 	label: '加装',
				// 	value: '512',
				// },
				// {
				// 	label: '其他费用',
				// 	value: '1024',
				// },
			];
			this.dictList.changeType = this.dict.type.order_car_change_type;
			this.getDeptList(2);
			this.getLevelList();
			this.getPackagelList();
			this.getSupplierList();
			this.getInsuranceList();
			this.$forceUpdate();
		},
		mounted() {},
		methods: {
			onload() {
				this.initDefaultData();
			},
			initDefaultData() {
				this.getTemplateList(4);
				// this.formData.changeType ??= ['1'];

				this.getDecorationList(
					this.formData?.subsequentData?.carSeating,
					'init',
				);
			},
			setDisabledChangeType() {
				let level_1 = ['1', '2', '4', '8'];
				let level_2 = ['32', '64', '128', '256', '512', '1024'];
				let lastItem = this.formData?.changeType?.at(-1);
				this.dictList.changeType.forEach(item => {
					if (lastItem == undefined) {
						this.$set(item, 'disabled', false);
						return;
					}
					if (level_1.includes(lastItem)) {
						if (item.value == lastItem) {
							this.$set(item, 'disabled', false);
						} else {
							this.$set(item, 'disabled', true);
						}
					}
					if (level_2.includes(lastItem)) {
						if (level_2.includes(item.value)) {
							this.$set(item, 'disabled', false);
						} else {
							this.$set(item, 'disabled', true);
						}
					}
				});
				return;
				if (
					this.includes('1') ||
					this.includes('8') ||
					this.includesAny({ val: level_2, ext: 'some' })
				) {
					this.dictList.changeType.forEach(item => {
						if (this.includes(item.value, ['1', '8', ...level_2])) {
							this.$set(item, 'disabled', false);
						} else {
							this.$set(item, 'disabled', true);
						}
					});
				}
				if (
					this.includes('4') ||
					this.includesAny({ val: level_2, ext: 'some' })
				) {
					this.dictList.changeType.forEach(item => {
						if (this.includes(item.value, ['4', ...level_2])) {
							this.$set(item, 'disabled', false);
						} else {
							this.$set(item, 'disabled', true);
						}
					});
				}
				this.$forceUpdate();
			},
			toOrderChangeHistory() {
				this._toPage({
					name: 'MinOrderChangeHistory',
					query: Object.assign(this.$attrs, {
						orderCarChangeId: this.formData.orderCarChangeId,
						orderCarId: this.formData.orderCarId,
					}),
				});
			},
			includes(type, list = this.formData.changeType) {
				let pass = true;
				if (typeof list === 'string' || typeof list === 'number') {
					list = list?.toString()?.split(',');
				}
				let types = type.toString().split(',');
				if (!Array.isArray(list)) {
					return false;
				}

				for (let index = 0; index < types.length; index++) {
					const element = types[index];
					pass = list?.includes(element.toString());
					if (!pass) {
						break;
					}
				}
				return pass;
			},
			includesAny({ val, list, ext = 'all' }) {
				let pass = true;
				if (typeof list === 'string') {
					list = list.split(',');
				}
				list ??= this.formData.changeType;
				if (!Array.isArray(list)) {
					return false;
				}
				let vals = val;
				if (typeof val == 'string') {
					vals = val.toString().split(',');
				}

				for (let index = 0; index < vals.length; index++) {
					const element = vals[index];
					pass = list?.includes(element.toString());
					if (ext === 'some') {
						if (pass === true) {
							break;
						}
					}
					if (ext === 'all') {
						if (pass === false) {
							break;
						}
					}
				}
				return pass;
			},
			same(type, list) {
				let pass = true;
				list ??= this.formData.changeType;
				if (typeof list === 'string') {
					list = list.split(',');
				}
				let arr = type.toString().split(',');
				if (!Array.isArray(list)) {
					return false;
				}
				if (arr.length !== list.length) return false;
				for (let index = 0; index < arr.length; index++) {
					const element = arr[index];
					pass = list?.includes(element.toString());
					if (!pass) {
						break;
					}
				}
				return pass;
			},

			// 加装
			getDecorationList(carSeating, type) {
				if (type !== 'init') {
					this.$set(
						this.formData.subsequentData,
						'attachedDecorationList',
						[],
					);
				}
				if (!carSeating) {
					this.dictList.refittedList = [];
					this.$set(
						this.formData.subsequentData,
						'attachedDecorationList',
						[],
					);
					return;
				}
				let params = {
					seat: carSeating,
				};
				apis.Decoration(params).then(res => {
					if (res.code == 200) {
						let refittedList = [];
						refittedList = res.data;
						refittedList.push({
							decorationName: '其他',
							decorationFee: undefined,
						});
						this.dictList.refittedList = refittedList;
					}
				});
			},
			// 商业险险种
			getInsuranceList() {
				apis.Insurance({})
					.then(res => {
						if (res.code == 200) {
							this.dictList.insuranceList = res.data ?? [];
						}
					})
					.finally(() => {});
			},
			getSupplierList() {
				let params = {
					businessTypeCode: '6',
				};
				apis.SupplierlList(params).then(res => {
					if (res.code == 200) {
						this.dictList.supplierList = res.data ?? [];
					}
				});
			},
			getLevelList() {
				apis.LevelList({}).then(res => {
					if (res.code == 200) {
						this.dictList.levelList = res.data;
					}
				});
			},
			getPackagelList() {
				apis.PackagelList({}).then(res => {
					if (res.code == 200) {
						this.dictList.packagelList = res.data;
					}
				});
			},

			preview(row) {
				if (!this.isNull(row.contractTemplateId)) {
					this.$refs.commonContractContent.show(
						row.contractTemplateId,
					);
				} else {
					this.$message.error('模版id为空,无法查看');
				}
			},
			getTemplateList(type) {
				let params = {
					templateClassification: type,
					relatedCustomers: this.formData.leaseeId,
				};
				app.TemplateList(params).then(res => {
					if (res.code == 200) {
						this.dictList.contractTemplateId = res.data;
					}
				});
			},
			getDeptList(deptType) {
				let params = {
					deptType,
				};
				app.DeptListNoPermission(params).then(res => {
					if (res.code == 200) {
						// res?.data?.map(item => {
						// 	item.deptId = item.deptId?.toString();
						// });
						switch (deptType) {
							case 1:
								this.dictList.department = res?.data ?? [];
								break;
							case 2:
								this.dictList.company = res?.data ?? [];
								break;
						}
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		background-color: #fff;
		margin: 20px;
		padding: 0 20px;
		border-radius: 8px;
		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #333333;
			line-height: 22px;
			text-align: left;
			font-style: normal;
			padding: 15px 0;
			border-bottom: 1px solid #e9e9e9;
		}
	}
	.preview {
		margin-left: 10px;
	}
	.contracBox {
		position: relative;
		.orderChangeHistory {
			position: absolute;
			right: 0;
			top: 10px;
		}
	}
</style>
